<script setup lang='ts'>
import { nextTick, reactive, ref } from 'vue';
import { guild_roomApi } from '@/api/controller';
import { ToastError, ToastSuccess, Toastloading } from '@/utils/public';
const formLabelWidth = '120px'
const dataForm = ref()
const $emit = defineEmits(['updateList'])
const action = reactive({
  dialogFormVisible: false,
  disabled: false,
  room_id:0,
  tabPosition: 0,
  total: 0,
  TableList:[] as Array<any>
})
const listQuery = reactive({
  page:1,
  limit:20
})
interface tableFormQuert {
  label_id:number | string
  special_recommend_resource_url:string
  special_recommend_start_time:string
  special_recommend_end_time:string
}
interface coverFormQuert {
  cover_id:number | string
  start_time:string
  end_time:string
  imgurl:string
}
let tableForm = reactive({} as tableFormQuert)
let coverForm = reactive({} as coverFormQuert)
const formRules = {
  label_id: [{ required: true, trigger: 'blur', message: '请选择推荐标签' }],
  special_recommend_start_time: [{ required: true, trigger: 'blur', message: '请选择标签开始时间' }],
  special_recommend_end_time: [{ required: true, trigger: 'blur', message: '请选择标签结束时间' }],
  cover_id: [{ required: true, trigger: 'blur', message: '请选择推荐封面' }],
  start_time: [{ required: true, trigger: 'blur', message: '请选择封面开始时间' }],
  end_time: [{ required: true, trigger: 'blur', message: '请选择封面结束时间' }],
}
const labelChange = (e:any={})=>{
  const tableObj = action.TableList.find(res=> res.id == e) || { animate_resource:''}
  if(!tableObj.animate_resource) return tableForm.label_id = ''
  tableForm.special_recommend_resource_url = tableObj.animate_resource
}
const coverChange = (e:any={})=>{
  const coverObj = action.TableList.find(res=> res.id == e)
  coverForm.imgurl = coverObj.url
}
const handleSubmit = () => {
  dataForm.value.validate(async (valid: any) => {
    if (!valid) return
    const { tabPosition} = action
    const loading = Toastloading()
    let submitSet = false
    if(tabPosition == 1) {
      await guild_roomApi.insertOrUpdateLabel(tableForm).then(() => {
        submitSet = true
      })
      .catch(() => {
        loading.close()
      });
    }
    if(tabPosition == 2) {
      await guild_roomApi.roomspecialcover(coverForm).then(() => {
        submitSet = true
      })
      .catch(() => {
        loading.close()
      });
    }
    if(submitSet) {
      loading.close()
      ToastSuccess('配置成功')
      closeDialog()
    }
  })
}
const handleCurrentChange = async(page:any = 1)=>{
  const loading = Toastloading()
  listQuery.page = page
  await getRoomDynami()
  loading.close()
}
const getRoomDynami = async()=>{
  const res = await guild_roomApi.getRoomDynami(listQuery)
  const { data=[], total=0 } = res.data
  action.TableList = data
  action.total = total
}
const tableNavChange = async(e:any) => {
  const { room_id=0 } = action
  const loading = Toastloading()
  if(e == 1) {
    const res = await guild_roomApi.getLabel()
    const { data=[] } = res
    action.TableList = data
    await guild_roomApi.getRoomLabelById({ room_id }).then((res) => {
      const {
        label_id='',
        special_recommend_resource_url='',
        special_recommend_start_time='',
        special_recommend_end_time=''
      } = res.data || {}
      Object.assign(tableForm,{
        room_id,
        label_id,
        special_recommend_resource_url,
        special_recommend_start_time,
        special_recommend_end_time
      })
      if(label_id) labelChange(label_id)
    }).catch(() => {
      loading.close()
    });
  }
  if(e == 2) {
    await getRoomDynami()
    await guild_roomApi.getspectialroom({roomid:room_id}).then(res=>{
      const {
        special_img='',
        start_time='',
        end_time='',
      } = res.data || {}
      const coverObj = action.TableList.find(res=>res.url == special_img) || {id:''}
      Object.assign(coverForm,{
        cover_id:coverObj.id,
        roomid:room_id,
        imgurl:special_img,
        start_time,
        end_time
      })
      loading.close()
    }).catch(() => {
      loading.close()
    });
  }
  loading.close()
}
const openDialog = (query: any = {}) => {
  const { room_id } = query
  if(!room_id) return ToastError('room_id error')
  action.room_id = room_id
  action.tabPosition = 0
  action.dialogFormVisible = true
}
const closeDialog = () => {
  tableForm = reactive({} as tableFormQuert)
  coverForm = reactive({} as coverFormQuert)
  nextTick(() => {
    dataForm.value.clearValidate();
  });
  action.dialogFormVisible = false
}
defineExpose({
  openDialog
})
</script>

<template>
  <div>
    <el-dialog
      top="5vh"
      class="xm-dialog input-width"
      v-model="action.dialogFormVisible"
      :close-on-click-modal="action.disabled"
      :show-close="action.disabled"
      :close-on-press-escape="action.disabled"
      width="60%" title="配置标签">
      <el-radio-group v-model="action.tabPosition" @change="tableNavChange" class="xm-mb20">
        <el-radio-button :label="1">房间标签</el-radio-button>
        <el-radio-button :label="2">房间封面</el-radio-button>
      </el-radio-group>
      <el-form v-if="action.tabPosition == 1" ref="dataForm" :rules="formRules" :model="tableForm">
        <el-form-item :label-width="formLabelWidth" label="推荐标签" prop="label_id">
          <el-select @change="labelChange" v-model="tableForm.label_id" placeholder="请选择">
            <el-option v-for="item in action.TableList" :key="item.name" :label="item.name" :value="item.id" />
          </el-select>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="标签开始时间" prop="special_recommend_start_time">
          <el-date-picker v-model="tableForm.special_recommend_start_time" type="datetime"
            format="YYYY-MM-DD HH:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" placeholder="选择开始时间" />
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="标签结束时间" prop="special_recommend_end_time">
          <el-date-picker v-model="tableForm.special_recommend_end_time" type="datetime" format="YYYY-MM-DD HH:mm:ss"
            value-format="YYYY-MM-DD HH:mm:ss" placeholder="选择结束时间" />
        </el-form-item>
      </el-form>
      <el-form v-if="action.tabPosition == 2" ref="dataForm" :rules="formRules" :model="coverForm">
        <el-form-item :label-width="formLabelWidth" label="推荐封面" prop="cover_id">
          <el-select @change="coverChange" v-model="coverForm.cover_id" placeholder="请选择推荐封面">
            <el-option v-for="item in action.TableList" :key="item.name" :label="item.name" :value="item.id" />
            <el-pagination @current-change="handleCurrentChange"
              :current-page="listQuery.page" :page-sizes="[20, 30, 40, 50]" :page-size="listQuery.limit"
              layout=" prev, pager, next" :total="action.total" :background="true" style="margin-top: 20px">
            </el-pagination>
          </el-select>
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="封面开始时间" prop="start_time">
          <el-date-picker v-model="coverForm.start_time" type="datetime" format="YYYY-MM-DD HH:mm:ss"
            value-format="YYYY-MM-DD HH:mm:ss" placeholder="选择开始时间" />
        </el-form-item>
        <el-form-item :label-width="formLabelWidth" label="封面结束时间" prop="end_time">
          <el-date-picker v-model="coverForm.end_time" type="datetime" format="YYYY-MM-DD HH:mm:ss"
            value-format="YYYY-MM-DD HH:mm:ss" placeholder="选择结束时间" />
        </el-form-item>
      </el-form>
      <template v-if="!action.disabled" #footer>
        <span class="dialog-footer">
          <el-button @click="closeDialog">取 消</el-button>
          <el-button type="primary" @click="handleSubmit()">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>